<template>
    <div class="cart-container">
        <div class="mui-card" >
            <div class="mui-card-content">
                <div class="mui-card-content-inner" v-for="(item,i) in goodsList" :key="item.id">
                    <!-- 默认开关是开启的 -->
                    <mt-switch v-model="$store.getters.getStatus[item.id]" @change="switchState(item.id,$store.getters.getStatus[item.id])"></mt-switch>
                    <img :src="item.thumb_path" alt="">
                    <!-- 最右侧是一个子布局 -->
                    <div>
                        <h1 class="title">{{ item.title }}</h1>
                        <div>
                            <span class="price">￥{{ item.sell_price }}</span>
                            <!-- 子组件的样式 去子组件中进行设置和处理 -->
                            <numbox :initCount="$store.getters.getCount[item.id]" :goodsId="item.id"></numbox>
                            <!--阻止默认事件行为-->
                            <a href="#" @click.prevent="delItem(item.id,i)">删除</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner jiesuan">
                    <div class="left">
                        <p>总计（不含运费）</p>
                        <p>已勾选商品 <span class="red">{{ $store.getters.getTotal.count }}</span> 件， 总价 <span
                                class="red">￥{{ $store.getters.getTotal.price }}</span></p>
                    </div>
                    <mt-button type="danger">去结算</mt-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import numbox from '../subcomponent/Shopcart_Numbox.vue'

    export default {
        name: "ShopcartContainer",
        components: {
            numbox
        },
        data() {
            return {
                goodsList: [],
                selected: true
            }
        },
        created() {
            this.getCartInfo()
        },
        methods: {
            getCartInfo() {
                //这里的数据不可以直接通过localstorage进行获取
                //因为数据在用户这里存储，但是商品的信息可能已经发生了改变

                let goods = []

                // 全局数据不会随着页面的刷新 而消失
                this.$store.state.carts.forEach(item => goods.push(item.id))

                if (goods.length === 0) {
                    return
                }

                this.$http.get('api/goods/getshopcarlist/' + goods.join(',')).then(result => {
                    if (result.body.status === 0) {
                        this.goodsList = result.body.message
                    }
                })
            },
            delItem(id, i) {
                // i是需要删除的数据在渲染列表中的索引值
                this.goodsList.splice(i, 1)
                // 如果需要删除VueX中的数据，只能到main.js中去进行相应的操作
                this.$store.commit('delCart', id)
            },
            switchState(id,status){
                let obj ={id:id,selected: status}
                this.$store.commit("changeState",obj)
            }
        }
    }
</script>

<style scoped lang="less">
    .cart-container {
        background-color: #eee;
        overflow: hidden;

        .mui-card-content-inner {
            display: flex;
            /* flex布局中的元素垂直居中对齐 */
            align-items: center;

            img {
                width: 60px;
                height: 60px;
            }

            .title {
                font-size: 13px;
            }

            .price {
                color: red;
                font-weight: 700;
            }

        }
        .jiesuan {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .red {
                color: red;
                font-weight: bold;
                font-size: 16px;
            }

        }
    }
</style>